<template>
  <div class="container">
    <div class="shell">
      <div class="top">
        <span class="off" :style="{ opacity: isLogin ? 1 : 0.5 }">登录</span>
        <div class="button" @click="toggleLogin">
          <div class="ball" :style="{ left: isLogin ? '0' : '61%' }"></div>
        </div>
        <span class="on" :style="{ opacity: isLogin ? 0.5 : 1 }">注册</span>
      </div>

      <div class="bottom" :style="{ transform: isLogin ? 'rotateY(0)' : 'rotateY(180deg)' }">
        <div class="signIn">
          <h2>登录</h2>
          <el-select v-model="type" placeholder="身份选择" style="width: 200px; height: 25px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input
            v-model="username"
            style="width: 200px; height: 25px"
            placeholder="请输入用户名"
            clearable
          />
          <el-input
            v-model="password"
            style="width: 200px; height: 25px"
            type="password"
            placeholder="请输入密码"
            show-password
          />
          <button @click="login(username, password, type)">GO</button>
        </div>
        <div class="signUp">
          <h2>注册</h2>
          <el-input
            v-model="username"
            style="width: 200px; height: 25px"
            placeholder="请输入用户名"
            clearable
          />
          <el-input
            v-model="password"
            style="width: 200px; height: 25px"
            type="password"
            placeholder="请输入密码"
            show-password
          />
          <el-input
            v-model="cpassword"
            style="width: 200px; height: 25px"
            type="password"
            placeholder="请再次输入密码"
            show-password
          />
          <button @click="register(username, password, cpassword)">GO</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { login, register, toggleLogin } from '@/hook/user-api/userState'
import { useManagerStoreWithOut } from '@/stores/manager'
import { storeToRefs } from 'pinia'
/* 引入公共状态管理对象 */
const store = useManagerStoreWithOut()
const { isLogin } = storeToRefs(store)
const username = ref('')
const password = ref('')
const cpassword = ref('')

const options = [
  {
    value: 'common',
    label: '普通用户'
  },
  {
    value: 'traffic',
    label: '交管部门'
  },
  {
    value: 'admin',
    label: '管理员'
  }
]
const type = computed({
  get() {
    return store.userData.getType()
  },
  set(newVal) {
    return store.userData.setType(newVal)
  }
})
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../../assets/image/bg.jpg);
  .shell {
    width: 300px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    perspective: 1000px;
    /* 给最外层加上一个透视，否则接下去的翻转会没有3d的效果 */
    .top {
      width: 300px;
      display: flex;
      cursor: pointer;
      justify-content: space-evenly;
      .off,
      .on {
        color: #fff;
        transition: 0.5s;
        font: 300 20px '';
      }
      .on {
        opacity: 0.5;
      }
      .button {
        width: 60px;
        height: 25px;
        background-color: rgb(255, 235, 167);
        border-radius: 20px;
        position: relative;
        .ball {
          position: absolute;
          width: 25px;
          height: 25px;
          background-color: rgb(46, 45, 56);
          border-radius: 50%;
          transition: 0.5s;
          box-shadow: 0 0 10px #000;
          left: 0;
          transform: translate(-1px);
        }
      }
    }
    .bottom {
      width: 300px;
      height: 250px;
      background-color: rgb(31, 32, 41);
      transform-style: preserve-3d;
      /* 使元素呈现出3D效果 */
      position: relative;
      transition: 0.7s;
      border-radius: 5px;
      .signIn,
      .signUp {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        h2 {
          color: white;
        }
        :deep(.el-input__wrapper, ) {
          padding: 0 10px;
          background-color: rgb(31, 32, 41);
          color: #fff;
        }
        :deep(.el-select__wrapper) {
          background-color: rgb(31, 32, 41);
          color: #fff;
        }
        button {
          width: 80px;
          height: 30px;
          color: #333;
          font-size: 15px;
          background-color: rgb(255, 235, 167);
          border-radius: 4px;
          transition: 0.3s;
          margin-bottom: 10px;
          cursor: pointer;
          box-shadow: 0 0 10px rgb(255, 235, 167);
        }
        button:hover {
          background-color: #fff;
        }
      }
      .signIn {
        transform: translateZ(70px);
        /* 在这里我们将卡片里面内容和卡片有一个距离，这样子会更有立体感 */
      }

      .signUp {
        position: absolute;
        top: 0;
        transform: translateZ(-70px) rotateY(180deg);
        /* 我们给反面加上距离的时候，前往不要忘记给反面的内容也翻转一下，否则就会出现这种卡片转过来了，里面的内容也反了 */
      }
    }
  }
}
</style>
